<template>
  <div class="top-container">
    <LunBo class="top-container-LunBo"></LunBo>
    <Sweetness class="top-container-Sweetness"></Sweetness>

  </div>
</template>

<script>
/**
@file 首页顶部
**/
import LunBo from '../components/lunbo';
import Sweetness from '../../../../components/tiandu.vue'
export default {
  name: '',
  components: {
    LunBo,
    Sweetness
  },
  props: {},
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.top-container {
  display: flex;
  align-items: center;
  justify-content: space-around;

  &-LunBo {}

  &-Sweetness {
    margin-top: 3vh;
    background-color: #FAFDF4;
    border-radius: 16px;
    animation: fade-in;
    /*动画名称*/
    animation-duration: 0.5s;
    /*动画持续时间*/
    -webkit-animation: fade-in 0.5s;
    /*针对webkit内核*/
    -moz-box-shadow: 1px 1px 5px #D5EDA1;
    /*firefox*/
    -webkit-box-shadow: 1px 1px 5px #D5EDA1;
    /*safari或chrome*/
    box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);

    &:hover {
      box-shadow: inset -6px -6px 10px #c78534,
        inset 6px 6px 20px rgba(0, 0, 0, 0.05);
      transform: scale(0.95);
      cursor: url('https://pic1.imgdb.cn/item/633e7c9d16f2c2beb19e9633.png'), pointer;
      transition: all 0.2s linear;
      -moz-box-shadow: 1px 1px 5px #D5EDA1;
      /*firefox*/
      -webkit-box-shadow: 1px 1px 5px #D5EDA1;
      /*safari或chrome*/
      box-shadow: 1px 1px 5px #D5EDA1;
      /*opera或ie9*/
      background-color: #EAFFBD;
      color: #0D8078;
    }

  }

}
</style>
